<template>
    <div class="wrapper">
        <mt-header :fixed="false" title="个人信息" mtClass="no-bg" />
        <div class="list">
            <mt-cell title="头像" is-link  @click.native="toEditHeadImg">
                <span>
                    <img :src="userInfo.photo || 'static/default-headImg.png'" width="45" height="45" class="headImg">
                </span>
            </mt-cell>
            <mt-cell title="昵称" is-link @click.native="toEditNickname">
                <span>{{userInfo.name}}</span>
            </mt-cell>
            <mt-cell title="个人简介" is-link @click.native="toEditIntro">
            </mt-cell>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import mtHeader from "@/components/Header"
export default {
    data() {
        return {
            userInfo: {}
        };
    },
    components:{
        mtHeader
    },
    activated(){
        this.init();
    },
    methods:{
        ...mapActions('user', [
            'get_userInfo_cache',
            'get_userInfo_data'
        ]),
        init(){
            // 用户信息的缓存？缓存 : 发送请求
            this.get_userInfo_cache()
            .then(res => {
                if (res) {
                    this.userInfo = res
                } else {
                    this.get_userInfo_data().then(res => {
                        this.userInfo = res
                    })
                }
            })
        },
        toEditHeadImg(){
            this.$router.push({
                path:'/account/myInfo/editHeadImg',
                query:{ 
                    photo: this.userInfo.photo
                }
            })
        },
        toEditNickname(){
            this.$router.push({
                path:'/account/myInfo/editNickname',
                query:{ 
                    name: this.userInfo.name
                }
            })
        },
        toEditIntro(){
            this.$router.push({
                path:'/account/myInfo/editIntro',
                query:{ 
                    userProfiles: this.userInfo.userProfiles
                }
            })
        }
    }
};
</script>

<style lang="stylus" scoped>
.wrapper{
    .list{
        padding-top:10px;
        .headImg{
            width:45px;
            height:45px;
            border-radius:50%;
        }
    }
}
</style>